<template>
  <nav class="menu-container">
    <router-link :exact='item.exact' v-for="(item,i) in items" :key="i" :to="{name:item.name}" active-class="selected" 
    >
      <Icon :type="item.icon"/>
      <span>{{item.title}}</span>
    </router-link>
  </nav>
</template>
<script>
import Icon from "@/components/Icon";
export default {
  components: {
    Icon,
  },
  data() {
    return {
      items:[
        {
          name: "Home",
          title: "首页",
          icon: "icon-home",
          exact:true,
       },
        {
          name: "Blog",
          title: "文章",
          icon: "icon-gangbi",
          exact: false, 
       },
        {
          name: "About",
          title: "关于我",
          icon: "icon-guanyuwomen",
          exact:false,
       },
        {
          name: "Project",
          title: "项目&效果",
          icon: "icon-xiangmu",
          exact:false,
       },
        {
          name: "Message",
          title: "留言板",
          icon: "icon-liuyanban-05",
          exact:true,
       },
      ],
    };
  },
  methods: {
    isSelected(item) {
      var link = item.link.toLowerCase(); // 菜单的链接地址
      var curPathname = location.pathname.toLowerCase(); // 当前浏览器的访问路径
      if (item.startWith) {
        return curPathname.startsWith(link);
      } else {
        return curPathname === link;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.menu-container{
  color: gray;
  margin: 20px 0 0 0;
  a{
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 0 50px;
    height: 45px;
    display: flex;
    align-items: center;
    .icon-container{
      width: 24px;
    }
    &:hover{
      color:#FFF;
    }
    
  }
  .selected{
    background: gray;
    color: #fff;
  }
}
</style>

